<template>
    <div class="common-layout">
        <el-container>
            <!-- 顶部用户信息 -->
            <el-header class="user_header"><appTopnav /></el-header>
            <!-- 导航栏 -->
            <el-header class="nav_header"><AppHeader /></el-header>
            <!-- 吸顶栏 -->
            <el-header><AppHeaderStick /></el-header>
            <el-main>
                <!-- 路由添加过渡 -->
                <router-view v-slot="{ Component }">
                    <transition name="fade" mode="out-in">
                        <component :is="Component" /> </transition
                ></router-view>
                <!-- 二级路由 --></el-main
            >
            <!-- 回到顶部 -->
            <el-backtop :right="50" :bottom="100" style="color: #da9233" />
            <el-footer><AppFooter /></el-footer>
        </el-container>
    </div>
</template>

<script setup>
import appTopnav from '@/components/app-topnav.vue'
import AppHeader from '@/components/app-header.vue'
import AppFooter from '@/components/app-footer.vue'
import AppHeaderStick from '@/components/app-header-stick.vue'
import { categoryStore } from '@/stores/category'
import { onBeforeMount } from 'vue'
import { homeStore } from '@/stores/home'
const useHomeStore = homeStore()
const useCategoryStore = categoryStore()
onBeforeMount(() => {
    // 获取分类数据
    useCategoryStore.setList()
    useHomeStore.setBrand()
    useHomeStore.setHotLikeGoods()
})
</script>

<style lang="scss" scoped>
.el-header {
    width: 100vw;
    &:nth-child(1) {
        height: 30px;
    }
    &:nth-child(2) {
        height: 90px;
    }
    &:nth-child(3) {
        height: 10px;
    }
}
.el-main {
    overflow-y: hidden;
}
</style>
